<template>
  <lay-layer title="会员充值" v-model="visible" :area="['500px', '500px']">
    <div class="container">
      <el-card
        v-for="(item, index) in config"
        :key="index"
        @mouseenter="mouseenter(index)"
        @mouseleave="mouseleave"
        :class="{ activeClass: index == active }"
      >
        <div class="title">{{ item.label }}</div>
        <div class="price">
          ¥<span>{{ item.price }}</span>
        </div>
      </el-card>
    </div>
    <div class="content">
      <el-card>
        <div class="row">
          <svg-icon icon-name="weixinPay" class="weixinPay"></svg-icon> <span>支付方式：</span> 扫码支付
        </div>
        <lay-line></lay-line>
        <div class="row">
          <svg-icon icon-name="shichang" class="weixinPay"></svg-icon> <span>截止日期：</span>{{handleText}}
        </div>
        <lay-line></lay-line>
        <div class="qrcode">
          <x-img class="img" :src="`/common/qrcode/${active==0?1:active==1?3:12}`"></x-img>
        </div>
      </el-card>
    </div>
  </lay-layer>
</template>

<script setup>
import { computed, defineProps, ref, watch } from 'vue'
import {userInfor} from '@/hooks/userInfor'
import {add} from '@/utils/index'
const props = defineProps({
  open: {
    type: Boolean
  }
})
const visible = ref(false)
const active = ref(0) // 0, 1, 2
const config = [
  { label: '仅仅持续一个月', price: 1 },
  { label: '连续三个个月', price: 3 },
  { label: '暴力续费一整年', price: 12 }
]
watch(
  () => props.open,
  () => {
    visible.value = true
  }
)
function judge(date = new Date()){
  return active.value===0?add(new Date(date),'+1m','Y-m-d H:i:s'):active.value===1?add(new Date(date),'+3m','Y-m-d H:i:s'):add(new Date(date),'+1y','Y-m-d H:i:s')
}
const handleText = computed(() => {
  if (userInfor.value.vipGrade.vip) {
    // 续费
      return judge(userInfor.value.vipGrade.vipEndTime)
  } else {
    return judge()
  }
})

function mouseenter(index) {
  active.value=index
}
function mouseleave() {}
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  .el-card {
    flex: 1;
    transition: all 0.5s;
    &:nth-child(1),
    &:nth-child(2) {
      margin-right: 10px;
    }
  }
  .activeClass {
    transform: translateY(-5px);
    box-shadow: 0px 0px 12px #ff9671;
  }
  .title {
    // color: #ff9671;
  }
  .price {
    color: red;
    span {
      font-size: 18px;
      color: red;
    }
  }
}
.content {
  padding: 10px;
  .row {
    display: flex;
    span {
      font-weight: bold;
      display: inline-block;
      width: 80px;
      text-align: justify;
      text-align-last: justify;
    }
    .weixinPay {
      margin-right: 5px;
      height: 20px;
      width: 20px;
    }
  }
  .qrcode{
    display: flex;
    justify-content: center;
    .img{
      width: 180px;
      height: 180px;
    }
  }
}
</style>
